<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>扫码支付</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 40px;
      text-align: center;
    }
    #qrcode {
      margin-top: 20px;
      max-width: 300px;
      border: 1px solid #ccc;
    }
    #payBtn {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<h2>点击按钮生成支付二维码</h2>
<button id="payBtn">生成二维码</button>

<div>
  <img id="qrcode" src="" alt="支付二维码" style="display: none;" />
</div>

<script>
  document.getElementById('payBtn').addEventListener('click', function () {
    fetch('/pay/facetoface', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      }
    })
            .then(response => response.json())
            .then(res => {
              if (res.code === 200) {
                const img = document.getElementById('qrcode');
                img.src = res.data;
                img.style.display = 'block';
              } else {
                alert('生成二维码失败：' + res.message);
              }
            })
            .catch(error => {
              console.error('请求出错：', error);
              alert('接口请求失败');
            });
  });
</script>

</body>
</html>
